import React, { useCallback } from 'react'
import { SimpleSelector } from './simpleSelector'
import { connect } from 'react-redux'
import { getCommonAllCookiesSelector } from '../../selectors/baseSelector'

const maStateToProps = state => {
    return {
        allCookies: getCommonAllCookiesSelector(state),
    }
}

const mapDispatchToProps = dispatch => {
    return {
    }
}

export const CookieSelector = connect(maStateToProps, mapDispatchToProps)((props) => {
    const { cookieName, onSelectItem, readOnly, allCookies, placeholder = '选择Cookie' } = props
    const filterDataSource = React.useCallback(value => item => item.name.toUpperCase().includes(value.toUpperCase()), [])
    const getItemValue = React.useCallback(item => item.name, [])
    const renderItem = React.useCallback(item => item.name, [])
    const wrapOnSelectItem = useCallback(item => onSelectItem(item), [onSelectItem])

    return <SimpleSelector dataSource={allCookies} filterDataSource={filterDataSource}
        getItemValue={getItemValue} initValue={cookieName} onSelectItem={wrapOnSelectItem}
        readOnly={readOnly} renderItem={renderItem} placeholder={placeholder} />
})